<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="名称:">
        <el-input v-model="queryParams.username" placeholder="请输入用户名称" />
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-date-picker
          v-model="dateRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="queryParams.status" placeholder="请选择用户状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery('1')">搜索</el-button>
        <el-button type="primary" icon="el-icon-search" @click="uploadFile('1')">上传文件</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="上传文件" :visible="fileDialogVisible" @close="closeUploadDialog" width="500px">
      <el-form label-width="80px">
        <el-form-item label="文件列表">
          <el-upload
            ref="upload"
            multiple
            :action="fileUploadApi"
            :headers="headers"
            :limit="maxFileNum"
            :auto-upload="false"
            :on-exceed="onExceed"
            :on-success="onSuccess"
            :on-error="onError"
            :before-upload="beforeUpload">
            <div slot="trigger"><i class="el-icon-upload" style="margin-right:5px;"></i>点我添加文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </template>
    </el-dialog>

    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" />
      <el-table-column prop="realName" label="真实名称" min-width="80px" />
      <el-table-column prop="path" label="标题" min-width="80px" />
      <el-table-column prop="size" label="文件大小" min-width="80px" />
      <el-table-column prop="suffix" label="文件类型" min-width="80px" />
      <el-table-column prop="remark" label="备注" min-width="80px" />
      <el-table-column prop="createBy" label="上传人" min-width="80px" />
      <el-table-column prop="createTime" label="上传时间" min-width="80px" />
      <el-table-column prop="update" label="标题" min-width="80px" />
      <el-table-column prop="title" label="标题" min-width="80px" />
    </el-table>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import { getToken } from '@/utils/auth'

export default {
  mixins: [initData],
  data() {
    return {
      statusOptions: [],
      queryParams: {
        fileName: undefined,
        status: undefined
      },
      formLabelWidth: '100px',
      formReset: {
        status: '1'
      },
      fileDialogVisible: false,
      fileUploadApi: process.env.VUE_APP_BASE_API + "/system/file",
      headers: { 'token': getToken()},
      maxFileNum: 10,
      maxFileSize: 22
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    beforeInit() {
      this.base = '/system/file'
      this.modalName = '文件管理'
    },
    // 点击“上传文件”按钮
    uploadFile() {
      this.fileDialogVisible = true
    },
    // 关闭上传文件的对话框
    closeUploadDialog() {
      this.fileDialogVisible = false
    },
    // 上传文件对话框的取消按钮
    cancel() {
      this.fileDialogVisible = false
    },
    // 上传文件对话框的确认按钮
    submit() {
      this.$refs.upload.submit()
    },
    // 上传文件前，若返回false则停止上传
    beforeUpload(file) {
      // 判断文件大小，若大小超过100MB则拒绝上传
      let isLt2M = file.size / 1024 / 1024 < 100
      if (!isLt2M) {
        this.msgError(`${file.name}上传失败。原因：单个文件大小不能超过100MB`)
      }
      return isLt2M
    },
    // 当上传文件数量超过限制时
    onExceed() {
      this.msgError('最多同时上传' + this.maxFileNum + '个文件！')
    },
    // 上传成功时
    onSuccess(resp, file, fileList) {
      this.msgSuccess(`【${file.name}】文件上传成功`)
    },
    // 上传出错时
    onError(err, file, fileList) {
      this.msgError(`【${file.name}】文件上传失败`)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>